<template>
  <div class="container">
    <div class="userFormBox">
      <div class="userFormTitle">
        <h3>后台管理系统</h3>
      </div>
      <el-form ref="ruleFormRef" :model="formData" :size="formSize" class="formBox" :label-postion="labelPosition"
        label-width="auto" :rules="rules" status-icon>
        <el-form-item label="用户名:" prop="username ">
          <el-input v-model="formData.username " type="text" placeholder="请输入你的用户名" autocomplete="off" maxlength="12" />
        </el-form-item>
        <el-form-item label="密  码:" prop="password">
          <el-input v-model="formData.password" placeholder="请输入你的密码" show-password autocomplete="off" type="password"
            maxlength="16" />
        </el-form-item>
        <el-button type="primary" :size="loginButtonSize" :round="round" class="loginButton"
          @click="submitForm(ruleFormRef)">登录</el-button>
        <el-button class="loginButton" :round="round" :size="loginButtonSize" @click="Reset(ruleFormRef)">重置</el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive} from 'vue'
import { useRouter } from 'vue-router'
import type { FormRules, FormInstance } from 'element-plus'
import { LoginData } from '../type/loginView';
import { ElMessageBox, ElMessage } from 'element-plus'
import {login} from '../request/api'

/** 用户的名字和密码*/
const formData = reactive(new LoginData().ruleForm);
/** 表单的大小*/
const formSize = ref('default');
/** 输入框旁边文字的方法  */
const labelPosition = ref('right');
/** 登录按钮的大小*/
const loginButtonSize = ref('default');
/** 登录按钮的形状*/
const round = ref('round');
/** 表单的整个元素 */
const ruleFormRef = ref<FormInstance>()
/** 使用useRouter 进行跳转 --> $router   */
const router = useRouter();
/** 点击重置用户名和密码*/
const Reset = function (formEl: FormInstance | undefined) {
  ElMessageBox.confirm(
    '您确定要重置用户和密码吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '已经重置成功',
      });

      formData.username  = '';
      formData.password = '';
      
      if (!formEl) return;
      formEl.resetFields()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消重置',
      })
    })
}
/**用户名和密码的限制 */
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名的长度为3到12', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 16, message: '密码长度为5到16', trigger: 'blur' },
  ]
});
/** 登录时校验用户名和密码是否合格 */
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      login(formData).then((res) => {
        /** 存储token在浏览器里面 */
        localStorage.setItem('token', res.data.token);
        /** 跳转到首页 */
        console.log(res.data.token)
        router.push('/');
        console.log('跳转完毕')
      }, err => {
        console.log(err)
      }
      )
      console.log('submite success');
    } else {
      console.log('error submit!')
      return false
    }
  });
}


</script>


<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: url('../assets/image/LoginBg.jpg') no-repeat;
  background-size: cover;
  overflow: hidden;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;

  .userFormBox {
    width: 500px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 3px 3px 10px 10px rgba(1, 1, 1, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;

    @media screen and (min-width: 0px) and (max-width: 850px) {
        width: 100%;
        height: 100vh;
    }

    .userFormTitle {
      height: 30%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 888;

     
    }

    .formBox {
      box-sizing: border-box;
      padding-left: 15px;
      padding-right: 15px;
      width: 100%;
    }

    .loginButton {
      width: 130px;
    }
  }
}
.userFormTitle {

  h3 {
    color: rgba(1, 1, 1, 0.5);
  }
}
// 媒体查询

</style>